<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="css/base.css"></script>-->
    <script src="resource/vue.js"></script>
    <link rel="stylesheet" href="ElementUI/theme-chalk/index.css"/>
    <script src="ElementUI/index.js" charset="utf-8"></script>
    <script src="resource/axios.min.js"></script>
    <style>
        .box-card{
            width: 400px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 注册 -->
        <el-card class="box-card">
            <h3>名侦探柯南档案馆</h3>
            <el-form
                    ref="registerForm"
                    :model="registerForm"
                    :rules="rules"
                    label-width="80px">
                <el-form-item label="用户名" prop="username"> <!-- prop需与字段名一致 -->
                    <el-input v-model="registerForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="registerForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="registerForm.confirmPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="register()">注册</el-button>
                    <el-button type="primary" @click="login()">去登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <script>
        new Vue({
            el: '#app',

            data() {
                return {
                    registerForm: {
                        username: '',
                        password: '',
                        confirmPassword: ''
                    },
                    rules: {  // 校验规则对象
                        username: [
                            {required: true, message: '用户名不能为空', trigger: 'blur'},
                            {min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'},
                            {pattern: /^[a-zA-Z0-9_]+$/, message: '只允许字母、数字和下划线', trigger: 'blur'}
                        ],
                        password: [
                            {required: true, message: '密码不能为空', trigger: 'blur'},
                            {min: 6, max: 20, message: '长度在6-20个字符', trigger: 'blur'},
                            {validator: this.validatePassword, trigger: 'blur'} // 自定义密码复杂度校验
                        ],
                        confirmPassword: [
                            {required: true, message: '请再次输入密码', trigger: 'blur'},
                            {validator: this.validateConfirmPassword, trigger: 'blur'} // 自定义一致性校验
                        ]
                    },
                }
            },
            methods: {
                // 自定义密码复杂度校验函数
                validatePassword(rule, value, callback) {
                    if (!/[A-Za-z]/.test(value) || !/[0-9]/.test(value)) {
                        callback(new Error('需包含字母和数字'));
                    } else {
                        callback();
                    }
                },

                // 自定义确认密码校验函数
                validateConfirmPassword(rule, value, callback) {
                    if (value !== this.registerForm.password) {
                        callback(new Error('两次输入密码不一致'));
                    } else {
                        callback();
                    }
                },

                // 注册提交逻辑
                register() {
                    this.$refs.registerForm.validate(valid => { // 触发表单整体校验
                        if (valid) {
                            axios.post('/register',{
                                userName : this.registerForm.username,
                                userPassword: this.registerForm.password
                            }).then((response)=>{
                                console.log(response.data.data)
                                if(response.data.code == 200){
                                    localStorage.setItem("registerSuccess","true")
                                    window.location.href = "/login.html"
                                }else {
                                    this.$message.error(response.data.msg);
                                }
                            }).catch((error)=>{
                                console.log(error);
                            })
                        } else {
                            this.$message.warning('请检查表单输入');
                            return false; // 阻止提交
                        }
                    });
                },
                login(){
                    // localStorage.setItem("registerSuccess","true")
                    window.location.href = "/login.html"
                }
            },
        })

    </script>
</body>
</html>